<template>
    <f7-popup :opened="myPop" @popup:open="popOpen()">
        <f7-page bg-color="white">
            <f7-block>
                <div class="pro" v-for="item,index1 in productType">
                    <h4>{{index1 | numbers_num2()}}</h4>
                    <template  v-for="it,index2 in item">
                        <div class="item" :class="{'itemActive':it.switch}" @click="productClick(it,index1,index2)"> {{it.chn}}</div>
                    </template>
                    <div style="clear: both"></div>
                </div>
                <div style="clear: both"></div>
            </f7-block>
            <f7-toolbar>
                <f7-block class="addSelecToolbar">
                    <f7-link @click="prductSubmit()" v-if="able">确定</f7-link>
                    <f7-link  v-if="!able" style="color: #999999;">确定</f7-link>
                </f7-block>
                <f7-block class="addSelecToolbar">
                    <f7-link @click="closePop()">关闭</f7-link>
                </f7-block>
            </f7-toolbar>
        </f7-page>
    </f7-popup>
</template>

<script>
    import common from '../utils/common.js'
    export default {
        name: "setProductType",
        data () {
            return {
                able:false,
                myPop: false,
                productType:[],
                getProductTypeParam:{},
                productCate:{}
            }
        },
        methods:{
            openPop () {
                this.myPop = true
            },
            closePop () {
                this.myPop = false
            },
            popOpen () {
                this.getProductType()
            },
            prductSubmit(){
                this.closePop()
                let sourceData={};
                let resultDate={}
                this.productType.forEach(function (item1,index1) {
                    item1.forEach(function (item2) {
                        if(item2.switch){
                            resultDate[index1]=item2.chn
                            sourceData[index1]=item2
                        }
                    })
                })

                this.$emit('setProductTypeDone', {
                    productType:resultDate,
                    productTypeSd:sourceData,
                    productCate:this.productCate
                })
            },
            async getProductType(){
                let productTypeRes= (await this.ProductService.getProductType(this.getProductTypeParam)).data;
                if(productTypeRes.data[0]){
                    this.able = false;
                    let lev=productTypeRes.data[0].lev;
                    this.productType[lev] =productTypeRes.data;
                    this.$set(this.productType, lev, productTypeRes.data)
                    common.addAttrSwitch(this.productType[lev])
                }else{
                    this.able = true;
                    this.productCate=productTypeRes.data;

                }
            },
            productClick(item,index1,index2){

                //清空点击维度后边的缓存值
                this.productType=this.productType.slice(0,index1+1)

                //设置新值
                common.addAttrSwitch(this.productType[index1])
                item.switch=true;
                this.$set(this.productType[index1], index2, item)



                if(item.PID){
                    this.getProductTypeParam={PID:item._id}
                    this.getProductType()
                }

            }
        }
    }
</script>

<style scoped>
    .addSelecToolbar {
        text-align: center;
    }
    h4 {
        margin: 0;
    }
    .item {
        text-align: center;
        float: left;
        border: 1px solid #f5f5f5;
        border-radius: 3px;
        margin: 10px 5px 7px 0;
        padding: 3px;
        color: #333;
        min-width: 20%;
        max-width: 20%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
    }
    .itemActive {
        border-color: red;
    }
    .city, .district {
        margin-top: 30px;
    }
    .pro{
        margin-bottom:30px ;
    }
</style>
